<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
     $(function(){
     	$('.box ul li').hover(function() {
     		$(this).find('.caidan').show(300);
     	}, function() {
     		$(this).find('.caidan').hide(300);
     	});
     })

	</script>
	<style type="text/css">
     *{
			margin: 0px;
			padding: 0px;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
     
       .box{
       	 width: 1190px;
       	 height: 40px;
       	 margin: 0 auto;
       	 background: #000;
       }
       .box ul{
       	 width: 1190px;
       	 height: 40px;
       	 margin: 0 auto;
       	 
       }

      .box ul li{
      	width: 100px;
      	height: 40px;
      	
      	float: left;
      	margin-left: 30px;
      	position: relative;
      }
      .box ul li.li1{
      	
      	margin-left: 0px;
      	
      }
      .caidan{
      	width: 100px;
      	height: 40px;
      	position: absolute;
      	background:#000;
      	left: 0px;
      	top: 40px;
      	display: none;
      }
      a{
      	display: block;
      	width: 100px;
      	height: 40px;
        font-size: 14px;
        color: #FF0000;
        line-height: 40px;
        text-align: center;
        background:#000; 
      }
      a:hover{
      	background: red;
      	color: white;
      }



	</style>
	<title>Document</title>
</head>
<body>
<div class="box">
    <ul>
    	<li class="li1">
    	    <a href="">首页商品分类</a>
    	    
    	</li>
    	<?php foreach($data as $a): ?>
    	<li>
    	    <a href=""><?php echo $a['ding']; ?></a>
    	    <div class="caidan">
    	       <?php foreach($a['zi'] as $b): ?>
    	    	<a href=""><?php echo $b; ?></a>
    	       <?php endforeach ?>
    	    </div>
    	</li>
    	<?php endforeach ?>
    </ul>
</div>

</body>
</html>







